import { defineConfig, presetUno, presetAttributify } from "unocss";
import { presetWeapp } from "unocss-preset-weapp";
import {
  transformerAttributify,
  transformerClass,
} from "unocss-preset-weapp/transformer";

// 判断是否为 H5 平台
const isH5 = process.env.UNI_PLATFORM === "h5";

export default defineConfig({
  // 扫描文件范围
  include: [
    "src/**/*.{vue,js,ts}",
    "src/components/**/*.{vue,js,ts}",
    "src/pages/**/*.{vue,js,ts}",
  ],

  // 根据平台切换预设
  presets: isH5
    ? [
        // H5 平台：使用完整的 UnoCSS 预设
        presetUno({
          dark: "class",
        }),
        presetAttributify(),
      ]
    : [
        // 小程序等其他平台：使用 WeApp 预设
        presetWeapp({
          platform: "uniapp",
          // whRpx: true,        // 默认使用 rpx 单位
          // prefix: 'u-',       // 类名前缀
          // preflight: true,    // 基础样式
          // arbitraryVariants: true, // 任意变体
        }),
      ],
  blocklist: ["list-item"],
  // 根据平台切换转换器
  transformers: isH5
    ? []
    : [
        // 小程序端需要转换器将任意值语法转换为安全类名
        transformerAttributify(),
        transformerClass(),
      ],

  // 快捷方式（所有平台通用）
  shortcuts: [
    // 布局相关
    { "flex-center": "flex justify-center items-center" },
    { "flex-between": "flex justify-between items-center" },
    { "flex-start": "flex justify-start items-center" },
    { "flex-end": "flex justify-end items-center" },
    { "flex-col-center": "flex flex-col justify-center items-center" },

    // 按钮样式
    {
      "btn-primary":
        "bg-orange-500 text-white rounded-50rpx px-40rpx py-20rpx text-center cursor-pointer",
    },
    {
      "btn-secondary":
        "bg-gray-200 text-gray-800 rounded-50rpx px-40rpx py-20rpx text-center cursor-pointer",
    },

    // 卡片样式
    { card: "bg-white rounded-24rpx p-40rpx shadow-lg" },
    { "card-sm": "bg-white rounded-20rpx p-30rpx shadow-md" },

    // 输入框样式
    {
      "input-base":
        "bg-gray-50 rounded-24rpx px-30rpx py-20rpx border-none outline-none",
    },

    // 文本样式
    { "text-title": "text-32rpx font-600 text-gray-800" },
    { "text-subtitle": "text-28rpx font-500 text-gray-600" },
    { "text-body": "text-26rpx text-gray-700" },
    { "text-caption": "text-24rpx text-gray-500" },
  ],

  // 自定义规则（H5 平台需要 rpx 支持）
  rules: isH5
    ? [
        // H5 平台的 rpx 单位支持
        [/^m-(\d+)rpx$/, ([, d]) => ({ margin: `${d}rpx` })],
        [/^mt-(\d+)rpx$/, ([, d]) => ({ "margin-top": `${d}rpx` })],
        [/^mr-(\d+)rpx$/, ([, d]) => ({ "margin-right": `${d}rpx` })],
        [/^mb-(\d+)rpx$/, ([, d]) => ({ "margin-bottom": `${d}rpx` })],
        [/^ml-(\d+)rpx$/, ([, d]) => ({ "margin-left": `${d}rpx` })],
        [
          /^mx-(\d+)rpx$/,
          ([, d]) => ({ "margin-left": `${d}rpx`, "margin-right": `${d}rpx` }),
        ],
        [
          /^my-(\d+)rpx$/,
          ([, d]) => ({ "margin-top": `${d}rpx`, "margin-bottom": `${d}rpx` }),
        ],

        [/^p-(\d+)rpx$/, ([, d]) => ({ padding: `${d}rpx` })],
        [/^pt-(\d+)rpx$/, ([, d]) => ({ "padding-top": `${d}rpx` })],
        [/^pr-(\d+)rpx$/, ([, d]) => ({ "padding-right": `${d}rpx` })],
        [/^pb-(\d+)rpx$/, ([, d]) => ({ "padding-bottom": `${d}rpx` })],
        [/^pl-(\d+)rpx$/, ([, d]) => ({ "padding-left": `${d}rpx` })],
        [
          /^px-(\d+)rpx$/,
          ([, d]) => ({
            "padding-left": `${d}rpx`,
            "padding-right": `${d}rpx`,
          }),
        ],
        [
          /^py-(\d+)rpx$/,
          ([, d]) => ({
            "padding-top": `${d}rpx`,
            "padding-bottom": `${d}rpx`,
          }),
        ],

        [/^w-(\d+)rpx$/, ([, d]) => ({ width: `${d}rpx` })],
        [/^h-(\d+)rpx$/, ([, d]) => ({ height: `${d}rpx` })],
        [/^max-w-(\d+)rpx$/, ([, d]) => ({ "max-width": `${d}rpx` })],
        [/^max-h-(\d+)rpx$/, ([, d]) => ({ "max-height": `${d}rpx` })],
        [/^min-w-(\d+)rpx$/, ([, d]) => ({ "min-width": `${d}rpx` })],
        [/^min-h-(\d+)rpx$/, ([, d]) => ({ "min-height": `${d}rpx` })],

        [/^text-(\d+)rpx$/, ([, d]) => ({ "font-size": `${d}rpx` })],
        [/^leading-(\d+)rpx$/, ([, d]) => ({ "line-height": `${d}rpx` })],

        [/^rounded-(\d+)rpx$/, ([, d]) => ({ "border-radius": `${d}rpx` })],
        [/^border-(\d+)rpx$/, ([, d]) => ({ "border-width": `${d}rpx` })],

        [/^top-(\d+)rpx$/, ([, d]) => ({ top: `${d}rpx` })],
        [/^right-(\d+)rpx$/, ([, d]) => ({ right: `${d}rpx` })],
        [/^bottom-(\d+)rpx$/, ([, d]) => ({ bottom: `${d}rpx` })],
        [/^left-(\d+)rpx$/, ([, d]) => ({ left: `${d}rpx` })],

        [/^gap-(\d+)rpx$/, ([, d]) => ({ gap: `${d}rpx` })],
      ]
    : [], // 小程序端 presetWeapp 已经提供了 rpx 支持

  // 主题配置
  theme: {
    colors: {
      primary: "#ff8c00",
      secondary: "#f8f9fa",
    },
    breakpoints: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
    },
  },
});
